<div id="admin-team-detail">
  <div class="col-lg-12">
    <!-- main panel -->
    <section class="panel-container">
      <md-toolbar>
        <div class="md-toolbar-tools">
          <h3>{{ 'ADMIN_TEAM_TITLE' | translate}}:   {{team.name}}</h3>
          <span flex></span>
          <md-button
              class="md-icon-button"
              aria-label="{{ 'ADMIN_PROJECT_CREATE_TEXT' | translate }}"
              ng-click="openModal($event)">
            <md-tooltip md-autohide>{{ 'ADMIN_PROJECT_CREATE_TEXT' | translate }}</md-tooltip>
            <md-icon class="fa fa-plus-circle" ng-style="{'font-size': '20px'}"></md-icon>
          </md-button>
        </div>
      </md-toolbar>
      <!-- Panel content -->
      <section class="panel-content">
        <!-- tabs -->
        <md-tabs md-dynamic-height md-border-bottom>
          <!-- Rules -->
          <md-tab label="{{ 'ADMIN_TEAM_PROJECTS_TITLE' | translate }}">
            <md-content class="md-padding">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th translate="ADMIN_PROJECT_NAME"></th>
                      <th translate="ADMIN_PROJECT_NUM_RULES"></th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <md-progress-linear md-mode="indeterminate" ng-if="!projects"></md-progress-linear>
                    <tr ng-if="!projects || !projects.length">
                      <td colspan="3">
                        {{ 'NOT_FOUND_ANY_RESULT' | translate }}
                      </td>
                      <tr>
                        <tr ng-repeat="project in projects">
                          <td ng-bind="$index+1"></td>
                          <td>
                            <a ng-bind="project.name" ui-sref='banshee.admin.team.project.detail({id: project.id})' class="md-body-2"></a>
                          </td>
                          <td ng-bind="project.numRules"></td>
                          <td style="text-align: right;" ng-style="{'padding': '0px 10px'}">
                            <md-button class="md-raised md-mini" ui-sref="banshee.metric({project: project.id})" aria-label="project detail">
                              <i class="fa fa-search"></i>
                            </md-button>
                            <md-button class="md-raised md-mini"  ui-sref='banshee.admin.team.project.detail({id: project.id})' aria-label="edit project">
                              <i class="fa fa-pencil"></i>
                            </md-button>
                          </td>
                        </tr>
                  </tbody>
                </table>
              </div>
              <!-- END table-responsive-->
            </md-content>
          </md-tab>
          <md-tab label="{{ 'ADMIN_TEAM_EDIT_TEXT' | translate }}">
            <md-content class="md-padding">
              <!-- Form -->
              <form name="form" ng-submit="edit()" onvalidate>
                <md-content layout-padding>
                  <md-input-container class="md-block" flex-gt-sm>
                    <label>{{ 'ADMIN_TEAM_NAME' | translate }}</label>
                    <input type="text" name="teamName" ng-model="team.name" required>
                    <div ng-messages="form.teamName.$error" ng-if="form.teamName.$dirty">
                      <div ng-message="required">{{ 'FIELD_IS_REQUIRED' | translate }}</div>
                    </div>
                  </md-input-container>
                  <md-input-container>
                    <md-button class="md-raised" aria-label="{{ 'ADMIN_PROJECT_SAVE_TEXT' | translate }}" type="submit" ng-disabled="form.$invalid">
                      {{ 'SAVE' | translate }}
                    </md-button>
                    <md-button class="md-raised md-warn" aria-label="{{ 'ADMIN_PROJECT_DELETE_TEXT' | translate }}" type="button" ng-click="deleteTeam()">
                      {{ 'DELETE' | translate }}
                    </md-button>
                  </md-input-container>
                </md-content>
              </form> <!-- ./Form -->
            </md-content>
          </md-tab>
        </md-tabs>
      </section>
    </section>
  </div>
</div>
